<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn"><head>
<base href="<%=basePath%>">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="mobile-agent" content="format==[html5];url=https://y.qq.com/m/index.html">
    <meta name="applicable-device" content="pc">
    <title>G.E.M. 邓紫棋 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>

<link rel="stylesheet" href="static/singer/css/layout_0412.css">
<link rel="stylesheet" href="static/singer/css/singer_detail_59cfe684.css">
<link rel="stylesheet" href="static/singer/css/popup_login.css">
<link rel="stylesheet" href="static/singer/css/qb-ie-remind.css">
</head>

<body class="os_mac">
   	<!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->

	
<div class="main">
        <div class="mod_data">
            <span class="data__cover">
		        <img src="${mapSinger.singerPhoto}" class="data__photo js_index"/>
            </span>
            <div class="data__cont">
                <div class="data__name">
                    <h1 class="data__name_txt js_index">${mapSinger.singerName}</h1>
                </div>

                <div class="data__desc" id="singer_desc">
                    	中文名：${mapSinger.singerName} &nbsp;
						外文名：${mapSinger.seName}&nbsp; 国籍：${mapSinger.state}&nbsp; 出生地：${mapSinger.address}&nbsp;
						出生日期：${mapSinger.birthday}&nbsp; 职业：${mapSinger.work}
                </div>

                <ul class="mod_data_statistic">
                    <li class="data_statistic__item">
                        <a class="js_goto_tab" >
	                        <span class="data_statistic__tit">单曲</span>
	                        <strong class="data_statistic__number">${mapMusic.c }</strong>
                        </a>
                    </li>
                    <li class="data_statistic__item">
                        <a class="js_goto_tab">
                        	<span class="data_statistic__tit">专辑</span>
                        	<strong class="data_statistic__number">${mapSpecial.c }</strong>
                        </a>
                    </li>
                    <li class="data_statistic__item data_statistic__item--last">
                        <a class="js_goto_tab">
                        	<span class="data_statistic__tit">MV</span>
                        	<strong class="data_statistic__number">${mapMv.c }</strong>
                        </a>
                    </li>
                </ul>

                <div class="data__actions">
                    <a class="mod_btn_green js_singer_radio"><i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲</a>
                    <a class="mod_btn js_follow"><i class="mod_btn__icon_more"></i>关注 1109.7万</a>
                </div>
            </div>
        </div>

	<!--首页 begin-->
	
	<!-- 热门歌曲 -->
	<div class="js_tab" id="index_tab">
    
    <div class="mod_part">
            <div class="part__hd">
                <h2 class="part__tit">热门歌曲</h2>
		
                <a class="part__more js_goto_tab">全部<i class="icon_part_arrow sprite"></i></a>
            </div>
            <div class="mod_songlist">
                <ul class="songlist__header">
                    <li class="songlist__edit songlist__edit--check sprite">
                        <input type="checkbox" class="songlist__checkbox">
                    </li>
                    <li class="songlist__header_name">歌曲</li>
                    <li class="songlist__header_album">专辑</li>
                    <li class="songlist__header_time">时长</li>
                </ul>

                <ul class="songlist__list">
                <c:forEach items="${listSingerMusicList}" var="listSingerMusic">
                    <li>
                        <div class="songlist__item">
                            <div class="songlist__edit songlist__edit--check sprite">
                                <input type="checkbox" class="songlist__checkbox">
                            </div>
                            <div class="songlist__number">${listSingerMusic.singerId}</div>
                            <div class="songlist__songname">
                                <a class="songlist__icon songlist__icon_mv sprite" rel="noopener" target="_blank" >
                                <span class="icon_txt">MV</span></a>
                                <span class="songlist__songname_txt"><a class="js_song">${listSingerMusic.musicName }</a></span>
                                <div class="mod_list_menu">
                                    <a href="#" class="list_menu__item list_menu__play js_play">
                                        <i class="list_menu__icon_play">
                                        <video id="my-video" class="video-js" controls preload="auto" 
												width="100" 
												height="100">
											<source src="${listSingerMusic.musicMp3 }" type="video/mp4">
										</video>
                                        </i>
                                        <span class="icon_txt">播放</span>
                                    </a>
                                    <a class="list_menu__item list_menu__add js_fav">
                                        <i class="list_menu__icon_add"></i>
                                        <span class="icon_txt">添加到歌单</span>
                                    </a>
                                    
                                    <a class="list_menu__item list_menu__down js_down">
                                        <i class="list_menu__icon_down_vip"></i>
                                        <span class="icon_txt">VIP下载</span>
                                    </a>
                                    <a class="list_menu__item list_menu__share js_share">
                                        <i class="list_menu__icon_share"></i>
                                        <span class="icon_txt">分享</span>
                                    </a>
                                </div>
                            </div>
                            <div class="songlist__album">
                                    <a href="special/list2?musicId=${listSingerMusic.musicId }&specialId=${listSingerMusic.specialId}">${listSingerMusic.specialName }</a>
                            </div>
                            <div class="songlist__time">${listSingerMusic.timeLength }</div>
                            <div class="songlist__other">
                            </div>
                        </div>
                    </li>
                </c:forEach>  
                </ul>
            </div>
        </div>
    
   <!-- 专辑 --> 
        <div class="mod_part">
            <div class="part__hd">
                <h2 class="part__tit">专辑</h2>
                <a class="part__more js_goto_tab">
				全部<i class="icon_part_arrow sprite"></i>
				</a>
            </div>
            <div class="mod_playlist">
                <ul class="playlist__list" id="albumlist">
                <c:forEach items="${listSingerSpecialList}" var="listSingerSpecial">
                    <li class="playlist__item">
                        <div class="playlist__item_box">
                            <div class="playlist__cover mod_cover">
								<a href="special/list2?musicId=${listSingerSpecial.musicId }&specialId=${listSingerSpecial.specialId}" class="js_album" >
									<img src="${listSingerSpecial.specialPhoto}" class="playlist__pic">
									<i class="mod_cover__icon_play js_play"></i>
								</a>
							</div>
                            <h4 class="playlist__title">
								<span class="playlist__title_txt">
								<a href="special/list2?musicId=${listSingerSpecial.musicId }&specialId=${listSingerSpecial.specialId}" class="js_album" >${listSingerSpecial.specialName}</a>
								</span>
							</h4>
                            <div class="playlist__other">
                                ${listSingerSpecial.issueDate}
                            </div>
                            <a href="javascript:;" class="btn_operate_menu js_albumlist_more">
								<span class="icon_txt">更多</span>
							</a>
                        </div>
                    </li>
				</c:forEach>
				</ul>
            </div>
        </div>
    
<!-- mv -->
    
        <div class="mod_part">
            <div class="part__hd">
                <h2 class="part__tit">MV</h2>
		
                <a class="part__more js_goto_tab">全部<i class="icon_part_arrow sprite"></i></a>
		
            </div>
            <div class="mod_mv">
                <ul class="mv_list__list" id="mvlist">
                <c:if test="${empty listSingerMv.mvMp4}">
                <c:forEach items="${listSingerMvList}" var="listSingerMv">
					<li class="mv_list__item">
						<div class="mv_list__item_box">
								<video id="my-video" class="video-js" controls preload="auto" 
											         width="224" 
													 height="126.65"
													 poster="${listSingerMv.mvPhoto }" >
									<source src="${listSingerMv.mvMp4 }" type="video/mp4">
								</video>
							<h3 class="mv_list__title"><a class="js_mv">${listSingerMv.mvName }</a></h3>
							<div class="mv_list__info">
								<span class="mv_list__listen">
									<i class="mv_list__listen_icon sprite"></i>3068.3万
								</span>
							</div>
						</div>
					</li>
			</c:forEach>
			</c:if>
			</ul>
            </div>
        </div>
    

	</div>

    
</div>


    <!-- 尾部 N -->
		<jsp:include page="musicFoot.jsp"></jsp:include>
	<!-- 尾部 S -->
	
</body></html>